A Pocket Guide to Creating Symbol Fonts by Brian Suda

Author:Brian Suda [Suda, Brian]
Language: eng
Format: epub
ISBN: 9781907828102
Publisher: BookBaby
Published: 2013-03-17T04:00:00+00:00

What do I need?

If you don’t have your shapes as vectors already, you’ll need to create them. To do so, you need software such as Adobe Illustrator or Inkspace. Any software that can export to SVG will do.

We’ll create these five icons with the shape tools.

Five audio icons we’ll draw and convert into a symbol font.

To make our lives easier, we want to design the icons to a size close to what the importing software will use. For instance, 1,024×1,024 pixels is a standard size. If we can make our audio icons at that scale, it will minimise the tweaking needed in the font software.

There are a few other things to note about optimising your symbols for fonts. This includes subpixel aliasing. While you might import your design at 1,024×1,024, there will be an underlying grid used by the software to increase or decrease the font size. If part of your design sits between two columns or rows of the grid, when shrunk it won’t occupy a full pixel, making the edges softer and not as crisp. To avoid this, all you would need to do is push the original design left or right, or up or down so it sits nicely on the grid. When GitHub designed its icon set, Octicons, Cameron McEfee wrote an excellent post about this grid.

Now that we have created the individual vector graphics, we need to use some font-making software to combine them into a font file. There are several alternatives at various price points. If you are going to make a living creating fonts, there are professional tools like Fontographer or Glyphs. But there is also free software that anyone can download and use called FontForge. It’s not pretty, but it runs on all major platforms. The general workflow is the same even if you are using different software.

Download and install FontForge. Depending on your operating system and version, you will probably need to install some additional software such as X11, XQuartz or cygwin.

Finding your way around FontForge can be daunting, but there are only a few special areas we’ll be focusing on as you create your font. These are: the Element menu and the Encoding menu.

FontForge has two main windows: the window where you can see your entire list of glyphs; and a specific glyph editor window. To make your life easier, the main window can be adjusted so you can better see your symbols. If you go to the View menu, and then select 96 pixel outline, it will make the boxes bigger so you can actually see the glyphs you are working with. You can adjust the size to your preference.

At this point, you should see something like this, a complete alphabet of empty glyphs that the software is expecting you to draw.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.